<script setup>
import {codeBtnLoading,codeBtnDisable, codeBtnText, getCode} from '@/views/login/GetMailCode.js'
import {watchEffect, ref, reactive, watch} from "vue";
import {useRouter, useRoute} from "vue-router";
import {loginByMailAPI} from "@/api/login.js";
import {login} from "@/views/login/Login.js";

const router = useRouter()
const route = useRoute()

// *****************
// * 登录相关数据限制 *
// *****************
const env = import.meta.env
const MAIL_MAX_LEN = Number.parseInt(env.VITE_MAIL_MAX_LEN) || 255
const CODE_LEN = Number.parseInt(env.VITE_CODE_LEN) || 6

// ***********
// * 登录信息 *
// ***********
const loginInfo = reactive({
  mail: '',
  code: ''
})

// ******************
// * 监听登录信息的输入 *
// ******************
const loginButtonDisable = ref(false)
watch(
    () => [loginInfo.mail, loginInfo.code],
    ([newMail, newCode]) => {
      if (newMail.length <= 0) codeBtnDisable.value = true
      else codeBtnDisable.value = false
      if (newMail.length <= 0 || newCode.length < CODE_LEN) loginButtonDisable.value = true
      else loginButtonDisable.value = false
    },
    {
      immediate: true
    }
)

// **************
// * 登录按钮状态 *
// **************
const loginBtnLoading = ref(false)
// const loginBtnDisable = computed(() => {
//   return loginInfo.mail.length <= 0 || loginInfo.code.length < CODE_LEN || loginBtnLoading.value
// })
const loginBtnDisable = ref(false)

// *******
// * 登录 *
// *******
function handleLogin() {
  login(
      loginBtnLoading,
      loginBtnDisable,
      () => {
        return loginByMailAPI(loginInfo.mail, loginInfo.code)
      },
      router,
      route
  )
}
</script>

<template>
  <div class="login-form-mail">
    <van-cell-group>
      <van-field
          clearable
          required
          placeholder="请输入邮箱"
          :maxlength="MAIL_MAX_LEN"
          v-model="loginInfo.mail"
      >
        <template #left-icon>
          <span class="iconfont icon-email"></span>
        </template>
      </van-field>
      <div class="flex">
        <van-field
            class="flex-center"
            clearable
            required
            placeholder="请输入 6 位验证码"
            :maxlength="CODE_LEN"
            v-model="loginInfo.code"
        >
          <template #left-icon>
            <span class="iconfont icon-yanzhengma1"></span>
          </template>
        </van-field>
        <van-button
            class="w-56"
            type="primary"
            loading-type="spinner"
            :loading-text="codeBtnText"
            :loading="codeBtnLoading"
            :disabled="codeBtnDisable"
            @click="getCode(loginInfo.mail)"
        >{{ codeBtnText }}</van-button>
      </div>
      <van-button
          type="primary"
          block
          :loading="loginBtnLoading"
          :disabled="loginBtnDisable || loginBtnLoading || loginButtonDisable"
          loading-text="登录中..."
          @click="handleLogin"
      >登录</van-button>
    </van-cell-group>
  </div>
</template>

<style scoped lang="scss">

</style>